<template>
  <div id="apply">
    <headerTitle status="show" text="我要请假"></headerTitle>
    <div class="split20"></div>
    <div class="applyContainer">
      <ul class="applyFirst">
        <li>
          <label>请假类型：</label>
          <select name="">
            <option value="0">年假</option>
            <option value="1">事假</option>
            <option value="2">病假</option>
          </select>
        </li>
        <li>
          <label>开始日期：</label>
          <!-- <input type="text" id="startTime" name="startTime" placeholder="请选择开始日期"> -->
          <mu-date-picker hintText="请选择开始日期"/>
        </li>
        <li>
          <label>结束日期：</label>
          <input type="text" id="endTime" name="endTime" placeholder="请选择结束日期">
        </li>
        <li>
          <label>天数：</label>
          <input type="number" name="days" placeholder="请输入天数">
        </li>
      </ul>
      <div class="split20"></div>
      <div class="applySecond">
        <span>请假事由：</span>
        <textarea name="" placeholder="请输入请假事由"></textarea>
      </div>
      <div class="split20"></div>
      <ul class="applyThree">
        <li>
          <label>添加附件：</label>
          <input @click="change" type="file" name="file">
          <span>{{files}}</span>
          <i class="fa fa-chain fw"></i>
        </li>
      </ul>
    </div>
    <div class="split20"></div>
    <div m-role="UIbtn">提交</div>
  </div>
</template>

<script>
  import headerTitle from '../commons/header.vue'
  export default {
    name: 'apply',
    data () {
      return {
        msg: 'apply',
        files:'',
        dateInput:'',
      }
    },
    methods:{//方法
        change(){
          let file = $("input[type='file']")
          file.change(function(){
            if($(this).val() != ""){
              let val = $(this).val().split("\\")
              $(this).next("span").text(val[val.length-1])
            }else{
              $(this).next("span").text("选择附件")
            }
          })
          file.each(function(){
            if($(this).val() == ""){
              $(this).next("span").text("选择附件")
            }
          })
        },
    },
    computed:{//计算  引入vuex里的state数据

    },
    mounted(){//组件加载完执行
      this.change()
    },
    watch:{//监听数据，某数据改变时触发事件

    },
    components:{//引入组件
      headerTitle
    },
    destroyed(){//离开组件

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mu-text-field-line{
    height:0!important;
  }
</style>
